<template>
	<div>
		<vxe-table
			:id="vxeTableId"
			ref="xTable"
			:border="border"
			:custom-config="customConfig"
			:data="data"
			auto-resize
			:highlight-current-column="highlightCurrentColumn"
			resizable
			:stripe="stripe"
			round
			:row-config="rowConfig"
			:row-id="rowId"
			:row-key="rowKey"
			:size="size"
			:span-method="spanMethod"
			:highlight-hover-row="highlightHoverRow"
			:highlight-current-row="highlightCurrentRow"
			:checkbox-config="checkboxConfig"
			:radio-config="radioConfig"
			:loading="loading"
			:show-overflow="showOverflow"
			:max-height="maxHeight"
			:height="height"
			:row-class-name="rowClassName"
			:footer-cell-class-name="footerCellClassName"
			:footer-row-class-name="footerRowClassName"
			:footer-method="footerMethod"
			:header-cell-class-name="headerCellClassName"
			:cell-class-name="cellClassName"
			:show-footer="showFooter"
			:show-header="showHeader"
			:row-style="rowStyle"
			:cell-style="cellStyle"
			:header-cell-style="headerCellStyle"
			:expand-config="expandConfig"
			:tree-config="treeConfig"
			:tree-node="treeNode"
			:loading-config="{icon: 'vxe-icon-indicator roll', text: '加载中...'}"
			@toggle-tree-expand="onToggleExpandChangeEvent"
			@current-change="onCurrentChange"
			@checkbox-all="onCheckboxChange"
			@radio-change="onRadioChange"
			@checkbox-change="onCheckboxChange"
			@cell-dblclick="onCellDblclick"
			@cell-click="onCellClick"
			@filter-change="filterChange"
			@sort-change="sortChange"
			@scroll="onTableScroll"
		>
			<slot />
			<template #empty>
				<span style="">暂无数据</span>
			</template>
		</vxe-table>
	</div>
</template>
<script>
    export default {
        name: 'JkTable',
        props: {
            // 所有内容过长时显示为省略号,添加该属性，内容不会换行
            showOverflow: {
                type: [Boolean, String],
                default: false
            },
            maxHeight: {
                type: [Number, String],
                default: ''
            },
            height: {
                type: [Number, String],
                default: null
            },
            loading: {
                type: Boolean,
                default: false
            },
            rowKey: {
                type: Boolean,
                default: false
            },
            highlightHoverRow: {
                type: Boolean,
                default: true
            },
            highlightCurrentRow: {
                type: Boolean,
                default: false
            },
            border: {
                type: [Boolean, String],
                default: ''
            },
            resizable: {
                type: Boolean,
                default: false
            },
            stripe: {
                type: Boolean,
                default: false
            },
            round: {
                type: Boolean,
                default: false
            },
            size: {
                type: String,
                default: 'mini'
            },
            rowId: {
                type: String,
                default: 'kid'
            },
            rowClassName: {
                type: Function,
                default: null
            },
            highlightCurrentColumn: {
                type: Boolean,
                default: false
            },
            customConfig: {
                type: Object,
                default() {
                    return {
                        storage: true
                    };
                }
            },
            rowConfig: {
                type: Object,
                default() {
                    return {};
                }
            },
            printConfig: {
                type: Object,
                default() {
                    return {
                        style: `
                .vxe-table {
                  color: #000000; // 修改表格默认颜色
                  font-size: 12px; // 修改表格默认字体大小
                  font-family: "Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu; // 修改表格默认字体
                }
                .vxe-table,
                .vxe-table thead th,
                .vxe-table tbody td,
                .vxe-table tfoot td  {
                  border-color: #000000; // 修改表格边框颜色
                }
                .vxe-table thead th {
                  color: green; // 修改表头字体颜色
                  font-size: 14px; // 修改表头默认字体大小
                }
                .vxe-table tfoot td {
                  color: red; // 修改表尾字体颜色
                }
                `
                    };
                }
            },
            treeConfig: {
                type: Object,
                default() {
                    return {
                    };
                }
            },
            treeNode: {
                type: Boolean,
                default: false
            },
            expandConfig: {
                type: Object,
                default() {
                    return {
                    };
                }
            },
            checkboxConfig: {
                type: Object,
                default() {
                    return {
                        strict: false
                    };
                }
            },
            radioConfig: {
                type: Object,
                default() {
                    return {
                        trigger: 'row'
                    };
                }
            },
            data: {
                type: Array,
                default() {
                    return [];
                }
            },
            // 单元格合并的方法
            spanMethod: {
                type: Function,
                default: () => {}
            },
            // 表尾合计的方法
            footerMethod: {
                type: Function,
                default: () => {}
            },
            // 是否显示表尾
            showFooter: {
                type: Boolean,
                default: false
            },
            showHeader: {
                type: Boolean,
                default: true
            },
            // 给表尾的单元格附加 className
            footerCellClassName: {
                type: Function,
                default: () => {}
            },
            headerCellClassName: {
                type: Function,
                default: () => {
                    return 'col-blue';
                }
            },
            cellClassName: {
                type: Function,
                default: () => {}
            },
            // 给表尾的行附加 className
            footerRowClassName: {
                type: Function,
                default: () => {}
            },
            rowStyle: {
                type: Function,
                default: () => {}
            },
            cellStyle: {
                type: Function,
                default: () => {}
            },
            headerCellStyle: {
                type: Function,
                default: () => {}
            }
        },
        data() {
            return {
                vxeTableId: Date.now().toString(),
                name: ''
            };
        },
        mounted() {
            this.$nextTick(() => {
                // this.$refs.xTable.resetColumn(true);
            });
        },
        methods: {
            onTableScroll(e) {
                this.$emit('scroll', e);
            },
            onToggleExpandChangeEvent(e) {
                this.$emit('toggle-tree-expand', e);
            },
            onCheckboxChange(e) {
                this.$emit('checkbox-change', e);
            },
            onRadioChange(e) {
                this.$emit('radio-change', e);
            },
            onCurrentChange(e) {
                this.$emit('row-click', e);
                this.$emit('current-change', e);
            },
            onCellDblclick(e) {
                this.$emit('cell-dblclick', e);
            },
            onCellClick(e) {
                this.$emit('cell-click', e);
            },
            filterChange(e) {
                this.$emit('filter-change', e);
            },
            sortChange(e) {
                console.log(e, '我是组件');

                this.$emit('sort-change', e);
            },
            onCellChange(e) {
                this.$emit('cell-change', e);
            }
        }
    };
</script>

<style>
.vxe-table .vxe-cell{
    white-space: normal!important;
}
/* vxe-table工具栏的样式*/
.vxe-toolbar {
    font-size: 14px;
    height: 32px;
}
</style>
